<template>
    <div>
        <div v-if="currentPanel == 'list' ">
            <div class="m-alert">
                <div>
                    <div>若红包已发送至客户/客户群内，但此时微信制度商户平台出现余额不足，客户打开将无法领取，请务必保证账户余额充足，避免客户投诉</div>
                </div>
            </div>
            <div class="aaa"></div>
            <el-card class="box-card">
                <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
<!--                    <el-form-item>
                        <el-select v-model="queryData.empId" placeholder="创建人">
                            <el-option
                                    v-for="item in emp"
                                    :key="item.empId"
                                    :label="item.empName"
                                    :value="item.empId"/>
                        </el-select>
                    </el-form-item>-->
                    <el-form-item>
                        <el-select v-model="queryData.redType" placeholder="红包类型">
                            <el-option
                                    v-for="item in types"
                                    :key="item.redType"
                                    :label="item.name"
                                    :value="item.redType"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="queryData.redStatus" placeholder="启用状态">
                            <el-option
                                    v-for="item in statuss"
                                    :key="item.status"
                                    :label="item.name"
                                    :value="item.status"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="primary" @click="query">查询</el-button>
                        <el-button size="small" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <div style="height: 30px"></div>
            <!--按钮-->
            <el-card class="box-card">
                <div>
                    <el-button type="primary" @click="currentHandler('add')">
                        新建红包模板
                    </el-button>
                    <el-button type="primary" @click="setUp">设置客户限额
                    </el-button>
                    <el-button icon="el-icon-plus" @click="download">导出数据
                    </el-button>
                </div>
                <!--table-->
                <div class="interspaceH"></div>
                <el-table @selection-change="tableRowChange" :data="tableData"
                          :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                    <el-table-column prop="redScenario" label="使用场景">
                    </el-table-column>
                    <el-table-column prop="redType" label="红包类型">
                    </el-table-column>
                    <el-table-column prop="redAmount" label="总金额">
                    </el-table-column>
                    <el-table-column prop="redNumber" label="红包个数">
                    </el-table-column>
                    <el-table-column prop="redStatus" label="启用状态">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.redStatus"
                                       active-color="#13ce66"
                                       @change="xiugai(scope.$index, scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
<!--                    <el-table-column prop="count" label="使用次数">
                    </el-table-column>-->
                    <el-table-column prop="createTime" label="创建时间">
                    </el-table-column>
<!--                    <el-table-column prop="empName" label="创建人">
                    </el-table-column>-->
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="update(scope.$index, scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>
            <el-dialog title="客户限额设置" :visible.sync="envelopeSent" width="30%" :close-on-click-modal="false">
                <div class="m-alert">
                    <div>
                        <div>限额以【微信支付商户平台】配置的数值为准，若在珍客企微版配置的限额超出官方配置，执行规则依然以官方配置为准，请合理填写。
                            官方配置入口【微信支付商户平台】--【产品中心】--【企业付款到零钱】--【产品设置】。</div>
                        <div>最大限额参考：</div>
                        <div>1、商户号单日出款额度： 10万</div>
                        <div>2、单人单日付款额度： 5000元</div>
                        <div>单笔付款最低额度： 0.30元，默认每天最多可向同一个用户付款10次</div>
                    </div>
                </div>
                <br/>
                <el-form :model="modify" label-width="160px" class="demo-ruleForm">
                    <el-form-item label="商户号单日付款总额度" prop="totalDay">
                        <el-input v-model="modify.totalDay" style="width: 350px"></el-input>
                    </el-form-item>
                    <el-form-item label="单日客户收到红包次数" prop="collect">
                        <el-input v-model="modify.collect" style="width: 350px"></el-input>
                    </el-form-item>
                    <el-form-item label="单日客户收到红包金额" prop="sumAmount">
                        <el-input v-model="modify.sumAmount" style="width: 350px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" @click="envelopeSent = false">取消</el-button>
                        <el-button size="small" type="primary" @click="setEnd">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!--编辑-->
            <el-dialog :title="titles" :visible.sync="edit" width="30%" :close-on-click-modal="false">
                <el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="使用场景" prop="redScenario">
                        <el-select v-model="formData.redScenario" placeholder="使用场景">
                            <el-option
                                    v-for="item in redScenario"
                                    :key="item.redScenario"
                                    :label="item.name"
                                    :value="item.redScenario" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="红包类型" prop="redType">
                        <el-select v-model="formData.redType" placeholder="红包类型">
                            <el-option
                                    v-for="item in types"
                                    :key="item.redType"
                                    :label="item.name"
                                    :value="item.redType"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="总金额" prop="redAmount">
                        <el-input v-model="formData.redAmount" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="红包个数" prop="redNumber">
                        <el-input v-model="formData.redNumber" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="启用状态" prop="redStatus">
                        <el-switch v-model="formData.redStatus" active-color="#13ce66"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" @click="edit = false">取消</el-button>
                        <el-button size="small" type="primary" @click="submit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

        </div>
        <div v-if="currentPanel == 'add'">
            <thirdAdd @currentHandler=currentHandler></thirdAdd>
        </div>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination"
import thirdAdd from "@/views/masket/red_envelope/thirdAdd";
import axios from "axios";

export default {
    components: {
        Pagination,
        thirdAdd
    },
    data() {
        return {
            emp: [],
            titles: '编辑',
            edit: false,
            envelopeSent: false,
            modify: {},
            types: [
                {
                    redType: '普通红包',
                    name: '普通红包',
                },
                {
                    redType: '拼手气红包',
                    name: '拼手气红包',
                },
            ],
            statuss: [
                {
                    status: '1',
                    name: '启用',
                },
                {
                    status: '2',
                    name: '未启用',
                },
            ],
            redScenario: [
                {
                    redScenario: '发送客户',
                    name: '发送客户'
                },
                {
                    redScenario: '发送客户群',
                    name: '发送客户群'
                }
            ],
            tableData: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            formData: {},
            queryData: {
                empId: '',
                redType: '',
                redStatus: ''
            },

            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },
            //分页结束
            currentPanel: 'list',
        }
    },
    mounted() {
        this.queryDataHandle(1, 10)
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            let payload = {
                pageNum: page,
                pageSize: row
            }
            let that = this
            //红包模板列表
            that.$request("/api/redEnvelopeTemplate/getRedEnvelopeTemplateByParams/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                data.rows.map((item) => {
                    if (item.redStatus == '启用'){
                        item['redStatus'] = item.redStatus = true
                    }else if (item.status == '未启用') {
                        item['redStatus'] = item.redStatus = false
                    }else  {
                        item['redStatus'] = item.redStatus = false
                    }
                })
                that.tableData = data.rows
            })
            //员工
            let emp = {
                empId: ''
            }
            this.$request("/api/emp/getEmpList/1_0", {emp}, "POST").then((data) => {
                that.emp = data.rows
            })
        },
        query() {
            let redEnvelopeTemplate = {
                empId: this.queryData.empId,
                redType: this.queryData.redType,
                redStatus: this.queryData.redStatus
            }
            let that = this
            //红包模板列表
            that.$request("/api/redEnvelopeTemplate/getRedEnvelopeTemplateByParams/1_0", redEnvelopeTemplate, "POST").then((data) => {
                that.pagePagination['total'] = that.pagePagination['total']
                that.pagePagination['pageSize'] = that.pagePagination['pageSize']
                that.tableData = data.rows
                console.log(that.tableData)
            })
        },
        setUp(){
            let that = this
            that.$request("/api/customerLimit/selectAll/1_0", {}, "POST").then((data) => {
                if (data.rows == 0){
                    that.modify = {}
                }else {
                    that.modify = data.rows[0]
                }
            })
            this.envelopeSent = true
        },
        setEnd() {
            this.$request("/api/customerLimit/updateAll/1_0", this.modify, "POST").then((data) => {
                this.$message({
                    message: '保存成功',
                    type: 'success'
                })
                console.log(data)
            })
            this.envelopeSent = false
        },
        xiugai(index, row) {
            if (row.redStatus == false) {
                this.redStatus = '2'
            }else if(row.redStatus == true) {
                this.redStatus = '1'
            }
            let redEnvelopeTemplate = {
                redId: row.redId,
                redStatus: this.redStatus
            }
            this.$request("/api/redEnvelopeTemplate/updateRedEnvelopeTemplate/1_0", redEnvelopeTemplate, "POST").then((data) => {
                this.$message({
                    message: data.message,
                    type: 'success'
                });
                this.queryDataHandle(1, 10);
            })
        },
        currentHandler(type) {
            this.currentPanel = type
            this.queryDataHandle(1, 10)
        },
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        //编辑
        update(index,row) {
            this.edit = true
            this.formData = row
        },
        submit() {
            if (this.formData.redStatus == false) {
                this.redStatus = '2'
            }else if(this.formData.redStatus == true) {
                this.redStatus = '1'
            }
            let redEnvelope = {
                redId: this.formData.redId,
                redScenario: this.formData.redScenario,
                redType: this.formData.redType,
                redAmount: this.formData.redAmount,
                redNumber: this.formData.redNumber,
                redStatus: this.redStatus
            }
            this.$request("/api/redEnvelopeTemplate/updateRedEnvelopeTemplate/1_0", redEnvelope , "POST").then((data) => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                })
                console.log(data)
            })
            this.edit = false
        },


        resetQuery() {
            this.queryData = {}
        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },
        download() {
            var redEnvelopeTemplate = {
                empId : this.queryData.empId,
                redType : this.queryData.redType,
                redStatus : this.queryData.redStatus,
            }
            axios.post("/api/redEnvelopeTemplate/exportTable/1_0", redEnvelopeTemplate, {responseType: 'blob'},
                {
                    headers: {
                        "content-type": "multipart/from-data",
                    }
                }).then((res) => {
                // 创建a标签
                const link = document.createElement('a')
                //设置下载类型
                let blob = new Blob([res.data], {})
                //设置a标签样式
                link.style.display = 'none'
                //设置a标签url
                link.href = URL.createObjectURL(blob)

                //设置下载后文件名
                link.download = "红包模板.xlsx"
                //页面添加创建的a标签
                document.body.appendChild(link)
                //点击a标签
                link.click()
                //删除a标签
                document.body.removeChild(link)
            }).catch(error => {
                this.$message.error('下载失败');
            })
        }


    }
}
</script>

<style>
.el-icon-info {
    color: #0027ff;
    margin-right: 10px;
}

.aaa {
    height: 10px;
}
</style>
